/**
 * Created by JetBrains PhpStorm.
 * User: shaoshuai
 * Date: 11-10-5
 * Time: PM5:06
 * To change this template use File | Settings | File Templates.
 */
(function () {
    var _xtype = {};
    var _idCache = {};
    var _idCount = 0;
    
    var $ = {
        apply: function (o, c) {
            if (o && c && typeof c === 'object') {
                for (var p in c) {
                    o[p] = c[p];
                }
            }
            return o;
        },
        extend: function (parent, c) {
            var F = function () {
            };
            F.prototype = parent.prototype;
            var f = new F();
            this.apply(f, c);
            var child = function (config) {
                this.initComponent(config);
            };
            child.superclass = parent.prototype;
            child.prototype = f;
            return child;
        },
        reg: function (xtype, func) {
            _xtype[xtype] = func;
        },
        getId: function () {
            _idCount++;
            return 'cmp-id-' + _idCount;
        },
        each: function (array, iter, scope) {
            if (Object.prototype.toString.call(array) === '[object Array]') {
                var i;
                for (i = 0; i < array.length; i++) {
                    if (iter.call(scope || array[i], array[i], i) === false) {
                        break;
                    }
                }
            }
        }
    };

    $.Component = function (config) {
        this.initComponent(config);
    };
    $.Component.prototype = {
        isComponent: true,
        initComponent: function (config) {
            this.config = config = config || {};
            this.rendered = false;
            this.id = config.id || $.getId();
            _idCache[this.id] = this;
            this.init(this.config);
        },
        init: function () {
        },
        getEl: function () {
            return this.el;
        },
        getId: function () {
            return this.id;
        }
    };
    $.reg('component', $.Component);

    /**
     * BoxComponent: a component manage width and height
     */
    $.BoxComponent = $.extend($.Component, {
        init: function (config) {
            this.el = jQuery('<div></div>');
        },
        setWidth: function (width) {
            this.el.width(width);
            return this;
        },
        setHeight: function (height) {
            this.el.height(height);
            return this;
        },
        render: function (target) {
            jQuery(target).append(this.el);
            return this;
        },
        remove: function () {
            this.el && this.el.remove();
            delete this;
        }
    });
    $.reg('box', $.BoxComponent);

    /**
     * base component with items
     */
    $.Container = $.extend($.BoxComponent, {
        init: function (config) {
            this.items = config.items || [];
            this.el = jQuery('<div></div>');
        },
        add: function (cmp) {
            this.items.push(cmp);
        },
        render: function (target) {
            $.each(this.items, function (item) {
                item.render(this.el);
            }, this);

            jQuery(target).append(this.el);
            this.rendered = true;
            return this;
        }
    });
    $.reg('container', $.Container);

    $.Button = $.extend($.BoxComponent, {
        init: function (config) {
            this.el = jQuery('<button></button>');
            this.el.html(config.text);
        }
    });
    $.reg('button', $.Button);

    $.Panel = $.extend($.Container, {
        init: function () {
            this.el = jQuery('<div class="ui-panel">i am a panel</div>');
            this.el.css({
                'border': '1px solid black'
            });
        }
    });
    $.reg('panel', $.Panel);

    $.Mask = $.extend($.BoxComponent, {
        init: function () {
            this.el = jQuery('<div></div>');
        },
        render: function (target) {
            target = target || 'body';
            $.Mask.superclass.render.call(this, target);
            this.doLayout();
            return this;
        },
        doLayout: function () {
            this.el.addClass('lib_mask').height(jQuery(window).height()).width(jQuery(window).width());
        }
    });
    $.reg('mask', $.Mask);

    $.window = {};
    $.window.Window = $.extend($.Panel, {
        init: function (config) {
            var defaultConfig = {
                height: 'auto',
                width: 300,
                modal: true,
                title: '&nbsp;',
                closeAction: 'close',
                contentEl: '',
                buttonAlign: 'right'
            };
            this.config = $.apply(defaultConfig, config);
            this.template = [
                    '<div class="lib_window_container lib_window_hidden">',
                    '    <div class="lib_window_header">',
                    '        <span class="lib_window_title">' + this.config.title + '</span>',
                    '        <span class="lin_window_btn_close"></span>',
                    '    </div>',
                    '    <div class="lib_window_body"></div>',
                    '    <div class="lib_window_dock lib_window_dock_align_' + this.config.buttonAlign + '">',
                    '    </div>',
                    '</div>'
            ];

            this.el = jQuery(this.template.join('\n'));
            this.body = this.el.find('.lib_window_body');
        },
        render: function (target) {
            target = target || 'body';
            if (this.rendered) {
                return this;
            }
            /** 增加body内容 */
            if (this.config.html) {
                this.body.html(this.config.html);
            } else if (this.config.contentEl) {
                this.body.append(jQuery(this.config.contentEl));
            }

            /** 创建button */
            if (this.config.buttons && this.config.buttons.length > 0) {
                for (var i = 0; i < this.config.buttons.length; i++) {
                    var btn = this.config.buttons[i];
                    var b = jQuery('<button class="lib_button">' + btn.text + '</button>');

                    if (typeof btn.handler == 'function') {
                        b.click(btn.handler);
                    }
                    this.el.find('.lib_window_dock').append(b);
                }
            }


            /** 加入DOM */
            jQuery(target).append(this.el);
            this.doLayout();
            this.rendered = true;

            return this;
        },
        doLayout: function () {
            var top;
            var left;
            var width = this.config.width ? this.config.width : 300;
            var height = this.config.height ? this.config.height : 'auto';

            if (height == 'auto') {
                top = (jQuery(window).height() - this.el.height()) / 2;
            } else {
                top = (jQuery(window).height() - height) / 2;
            }

            left = (jQuery(window).width() - width) / 2;

            this.el.css({
                position: 'absolute',
                top: top + 'px',
                left: left + 'px',
                width: width
            });

            if (height !== 'auto') {
                this.body.height(height - this.el.find('.lib_window_header').height() - this.el.find('.lib_window_dock').height());
            }

            return this;
        },
        show: function () {
            this.render();
            if (this.config.modal) {
                this.mask = new $.Mask();
            }
            this.el.removeClass('lib_window_hidden lib_hidden');
            return this;
        },
        hide: function () {
            if (this.config.modal) {
                this.mask.remove();
            }
            this.el.addClass('lib_hidden');
            return this;
        },
        close: function () {
            if (this.config.closeAction == 'hide') {
                this.hide();
            } else {
                this.remove();
            }
        }
    });

    $.window.MessageBox = $.extend($.window.Window, {
        show: function () {
            this.mask = new $.Mask();
            this.el.removeClass('lib_window_hidden lib_hidden');
            return this;
        },
        close: function () {
            this.mask.remove();
            this.el.remove();
        }
    });

    $.window.Bubble = $.extend($.Container, {
        init: function (config) {
            var defaultConfig = {
                height: 40, //宽高见视觉标准
                width: 225,
                icon: $.Msg.SUCCESS,
                html: ''
            };
            this.config = $.apply(defaultConfig, config);
            this.xtype = 'bubble';
            this.el = jQuery('<div class="lib_bubble lib_hidden"><span class="lib_bubble_text">' + this.config.html + '</span></div>');
            this.render();
            this.show();
        },
        render: function () {
            if (this.config.icon == $.Msg.SUCCESS) {
                this.el.addClass('lib_bubble_success');
            } else if (this.config.icon == $.Msg.ERROR) {
                this.el.addClass('lib_bubble_error');
            }
            jQuery('body').append(this.el);
            this.doLayout();
        },
        doLayout: function () {
            var top;
            var left;
            var width = this.config.width;
            var height = this.config.height;

            top = (jQuery(window).height() - height) / 2;
            left = (jQuery(window).width() - width) / 2;

            this.el.css({
                position: 'absolute',
                top: top + 'px',
                left: left + 'px',
                width: width + 'px',
                height: height + 'px'
            });
        },
        show: function () {
            var that = this;
            this.el.removeClass('lib_hidden');
            setTimeout(function () {
                that.el.fadeOut('slow', function () {
                    that.el.remove();
                });
            }, 2000);
        }
    });

    $.Msg = {
        /**
         * Displays a standard read-only message box with an OK button (comparable to the basic JavaScript alert prompt).
         * @param {String} title 标题栏的文字
         * @param {String} msg 提示主题文字
         * @param {Number} icon 图标类型
         * @param {Function} fn 关闭时的回调函数
         * @param {Object} scope 回调函数的作用域
         * @return {Ext.window.MessageBox}
         */
        alert: function (title, msg, icon, fn, scope) {
            var iconCls = 'lib_msg_icon_success';
            if (icon == $.Msg.SUCCESS) {
                iconCls = 'lib_msg_icon_success';
            } else if (icon == $.Msg.INFO) {
                iconCls = 'lib_msg_icon_info';
            } else if (icon == $.Msg.WARNING) {
                iconCls = 'lib_msg_icon_warning';
            } else if (icon == $.Msg.ERROR) {
                iconCls = 'lib_msg_icon_error';
            }
            var html = '<div class="lib_msg_body"><div class="lib_msg_content ' + iconCls + '">' + msg + '</div></div>';
            var alert = new $.window.MessageBox({
                title: title,
                html: html,
                buttonAlign: 'right',
                buttons: [
                    {
                        text: '确定',
                        handler: function () {
                            alert.close();
                            fn && fn.call(scope || window, this);
                        }
                    }
                ]
            });
            alert.show();
            return alert;
        },
        /**
         * Displays a confirmation message box with Yes and No buttons (comparable to JavaScript's confirm).
         * @param {String} title 标题栏的文字
         * @param {String} msg 提示主题文字
         * @param {Number} icon 图标类型
         * @param {Function} fn 关闭时的回调函数
         * @param {Object} scope 回调函数的作用域
         * @return {Ext.window.MessageBox}
         */
        confirm: function (title, msg, icon, fn, scope) {

        },
        bubble: function (msg, icon) {
            var bubble = new $.window.Bubble({
                html: msg,
                icon: icon
            });
            return bubble;
        },
        SUCCESS: 1,
        INFO: 2,
        WARNING: 3,
        ERROR: 4
    };



    window.Lib = $;
    window.LB = $;
    window._idCache = _idCache;
})();